<template>
  <view class="home">
    <scroll-view scroll-y class="main-content">
      <view class="scroll-content">
        <!-- 顶部搜索栏 -->
        <view class="search-bar">
          <view class="city" @click="onCity">广州<uni-icons type="arrowdown" size="16" color="#888" /></view>
          <view class="search-input">
            <uni-icons type="search" size="18" color="#bbb" />
            <input placeholder="搜索图片、文章、视频" />
          </view>
        </view>

        <!-- Banner大图 -->
        <image class="banner" src="https://img.yzcdn.cn/vant/cat.jpeg" mode="aspectFill"></image>

        <!-- 功能入口 -->
        <view class="func-grid">
          <view class="func-item" v-for="(item, i) in funcList" :key="i" @click="onFuncClick(item)">
            <view class="func-icon" :style="(item.icon === 'transfer' || item.icon === 'lookshop') ? '' : {background: item.bg}">
              <image v-if="item.icon === 'transfer'" src="/static/index/transfer.png" class="func-img" mode="aspectFit" />
              <image v-else-if="item.icon === 'lookshop'" src="/static/index/lookshop.png" class="func-img" mode="aspectFit" />
              <image v-else-if="item.icon === 'Information'" src="/static/index/Information.png" class="func-img" mode="aspectFit" />
              <image v-else-if="item.icon === 'learning'" src="/static/index/learning.png" class="func-img" mode="aspectFit" />
              <image v-else-if="item.icon === 'shopcircle'" src="/static/index/shopcircle.png" class="func-img" mode="aspectFit" />
              <image v-else-if="item.icon === 'ranklist'" src="/static/index/ranklist.png" class="func-img" mode="aspectFit" />
              <uni-icons v-else :type="item.icon" size="28" color="#fff" />
            </view>
            <text class="func-text">{{ item.text }}</text>
          </view>
        </view>

        <!-- 热门行业 -->
        <view class="section-row">
          <text class="section-title">热门行业</text>
        </view>
        <view class="hot-industry">
          <view class="hot-item" v-for="(item, i) in hotList" :key="i">
            <view class="hot-icon" :style="{background: item.bg}">
              <image v-if="item.icon === 'catering'" src="/static/index/catering.png" class="hot-img" mode="aspectFit" />
              <image v-else-if="item.icon === 'market'" src="/static/index/market.png" class="func-img" mode="aspectFit" />
              <image v-else-if="item.icon === 'hotel'" src="/static/index/hotel.png" class="func-img" mode="aspectFit" />
              <image v-else-if="item.icon === 'hairdressing'" src="/static/index/hairdressing.png" class="func-img" mode="aspectFit" />
              <uni-icons v-else :type="item.icon" size="22" color="#fff" />
            </view>
            <text class="hot-text">{{ item.text }}</text>
          </view>
        </view>

        <!-- 精选推荐 -->
        <view class="section-row">
          <text class="section-title">精选推荐</text>
        </view>
        <view class="section-tags">
          <text v-for="(tag, i) in tags" :key="i" :class="['tag', tag === activeTag ? 'active' : '']" @click="activeTag = tag">{{ tag }}</text>
        </view>
        <view class="recommend-list">
          <view class="recommend-card" v-for="(item, i) in recommendList" :key="i">
            <view class="rec-info">
              <view class="rec-title">{{ item.title }}</view>
              <view class="rec-desc">{{ item.desc }}</view>
              <view class="rec-meta">
                <text class="rec-price">{{ item.price }}元</text>
              </view>
            </view>
            <image class="rec-img" :src="item.img" mode="aspectFill"></image>
          </view>
        </view>

        <!-- 资讯区块 -->
        <view class="section-row">
          <text class="section-title">资讯学习</text>
        </view>
        <view class="news-tags">
          <text v-for="(tag, i) in newsTags" :key="i" :class="['tag', newsActiveTag === tag ? 'active' : '']" @click="newsActiveTag = tag">{{ tag }}</text>
        </view>
        <view class="news-list">
          <view class="news-card" v-for="(item, i) in newsList" :key="i">
            <view class="news-info">
              <view class="news-title">{{ item.title }}</view>
              <view class="news-desc">{{ item.desc }}</view>
              <view class="news-meta">
                <text class="news-author">{{ item.author }}</text>
                <text class="news-time">{{ item.time }}</text>
              </view>
            </view>
            <image class="news-img" :src="item.img" mode="aspectFill"></image>
          </view>
        </view>

        <!-- 店铺圈区块 -->
        <view class="section-row">
          <text class="section-title">店铺圈</text>
        </view>
        <view class="circle-tags">
          <text v-for="(tag, i) in circleTags" :key="i" :class="['tag', circleActiveTag === tag ? 'active' : '']" @click="circleActiveTag = tag">{{ tag }}</text>
        </view>
        <view class="circle-list">
          <view class="circle-card" v-for="(item, i) in circleList" :key="i">
            <image class="circle-avatar" :src="item.avatar" mode="aspectFill"></image>
            <view class="circle-content">
              <view class="circle-nick">{{ item.nick }} <text class="circle-badge">{{ item.badge }}</text></view>
              <view class="circle-text">{{ item.text }}</view>
              <view class="circle-meta">
                <text class="circle-time">{{ item.time }}</text>
                <text class="circle-loc">· {{ item.loc }}</text>
                <uni-icons type="heart" size="18" color="#bbb" />
                <text class="circle-num">{{ item.like }}</text>
                <uni-icons type="chat" size="18" color="#bbb" />
                <text class="circle-num">{{ item.comment }}</text>
                <uni-icons type="star" size="18" color="#bbb" />
                <text class="circle-num">{{ item.collect }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="custom-tabbar">
      <view class="tabbar-item" :class="{active: tabIndex === 0}" @click="tabIndex = 0">
        <uni-icons type="home" size="28" :color="tabIndex === 0 ? '#000' : '#888'" />
        <text>首页</text>
      </view>
      <view class="tabbar-item" :class="{active: tabIndex === 1}" @click="tabIndex = 1">
        <uni-icons type="compass" size="28" :color="tabIndex === 1 ? '#000' : '#888'" />
        <text>发现</text>
      </view>
      <view class="tabbar-item center-btn" @click="onPublish">
        <view class="center-circle">
          <uni-icons type="plusempty" size="32" color="#fff" />
          <text>发布</text>
        </view>
      </view>
      <view class="tabbar-item" :class="{active: tabIndex === 3}" @click="tabIndex = 3">
        <view style="position:relative;">
          <uni-icons type="chat" size="28" :color="tabIndex === 3 ? '#000' : '#888'" />
          <view v-if="hasMsg" class="red-dot"></view>
        </view>
        <text>消息</text>
      </view>
      <view class="tabbar-item" :class="{active: tabIndex === 4}" @click="goMine">
        <uni-icons type="person" size="28" :color="tabIndex === 4 ? '#000' : '#888'" />
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

function onFuncClick(item) {
  if (item.icon === 'transfer') {
    uni.navigateTo({
      url: '/pages/transfer/transfer'
    })
  }
}

const funcList = [
  { icon: 'transfer', text: '我要转店' },
  { icon: 'lookshop', text: '我要找店' },
  { icon: 'Information', text: '热门资讯' },
  { icon: 'learning', text: '经营学习' },
  { icon: 'shopcircle', text: '店铺圈' },
  { icon: 'ranklist', text: '热门榜单' }
]
const hotList = [
  { icon: 'catering', text: '餐饮美食' },
  { icon: 'market', text: '百货超市' },
  { icon: 'hotel', text: '宾馆酒店' },
  { icon: 'hairdressing', text: '美容美发' }
]
const tags = ['餐饮美食', '百货超市', '美容美发', '宾馆酒店', '休闲娱乐']
const activeTag = ref(tags[0])
const recommendList = [
  { img: 'https://img.yzcdn.cn/vant/cat.jpeg', title: '美容美发店', desc: '优选商家，环境舒适，服务周到', price: 8333, position: '广州白云区' },
  { img: 'https://img.yzcdn.cn/vant/cat.jpeg', title: '优选超市', desc: '百货齐全，价格实惠', price: 8333, position: '广州白云区' }
]
const newsTags = ['推荐', '最新', '餐饮美食', '百货超市', '美容美发', '宾馆酒店']
const newsActiveTag = ref(newsTags[0])
const newsList = [
  { title: '红糖馒头一学就会的做法', desc: '打卡早餐新选择，健康美味', author: '红糖馒头', time: '1小时前', img: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { title: '心怡超市探店', desc: '八大"隐藏"特价推荐，舞蹈区必看', author: '小超探店', time: '2小时前', img: 'https://img.yzcdn.cn/vant/cat.jpeg' }
]
const circleTags = ['关注', '最新', '推荐']
const circleActiveTag = ref(circleTags[0])
const circleList = [
  { avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nick: '朱古力', badge: 'Lv9', text: '我老公大眼睛大嘴巴 我爸来我家就问 你家蛤蟆精不在家吗😅😅 然后我老公从浴室出来说 爸我在家😅', time: '2天前', loc: '黑龙江', like: 10, comment: 4, collect: 1 },
  { avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nick: '朱古力', badge: 'Lv9', text: '我老公大眼睛大嘴巴 我爸来我家就问 你家蛤蟆精不在家吗😅😅 然后我老公从浴室出来说 爸我在家😅', time: '2天前', loc: '黑龙江', like: 10, comment: 4, collect: 1 }
]
const tabIndex = ref(0)
const hasMsg = ref(true)

function onCity() {
  uni.showToast({ title: '切换城市', icon: 'none' })
}

function onPublish() {
  uni.showToast({ title: '发布功能开发中', icon: 'none' })
}

function goMine() {
  uni.navigateTo({ url: '/pages/mine/mine' })
}
</script>

<style>
html, body {
  height: 100vh;
  overflow: hidden;
}
</style>

<style scoped>
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  overflow: hidden;
}
.main-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 120rpx;
}
.scroll-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 120rpx;
}
.search-bar {
  display: flex;
  align-items: center;
  padding: 18rpx 20rpx 0 20rpx;
  background: #fff;
}
.city {
  color: #333;
  font-size: 28rpx;
  margin-right: 18rpx;
  display: flex;
  align-items: center;
}
.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 32rpx;
  padding: 0 20rpx;
  height: 56rpx;
}
.search-input input {
  border: none;
  background: transparent;
  margin-left: 10rpx;
  font-size: 26rpx;
  flex: 1;
}
.banner {
  width: 92vw;
  height: 180rpx;
  margin: 20rpx auto 0 auto;
  border-radius: 16rpx;
  object-fit: cover;
  display: block;
}
.func-grid {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 18rpx;
  margin: 18rpx 12rpx 0 12rpx;
  padding: 18rpx 0 0 0;
}
.func-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18rpx;
}
.func-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.func-text {
  font-size: 22rpx;
  color: #444;
}
.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18rpx 18rpx 0 18rpx;
}
.section-title {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
}
.section-more {
  font-size: 22rpx;
  color: #bbb;
  display: flex;
  align-items: center;
}
.hot-industry {
  display: flex;
  justify-content: space-between;
  margin: 18rpx 18rpx 0 18rpx;
}
.hot-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hot-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6rpx;
}
.hot-text {
  font-size: 20rpx;
  color: #444;
}
.section-tags {
  display: flex;
  gap: 16rpx;
  margin-left: 18rpx;
}
.tag {
  font-size: 22rpx;
  color: #888;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  background: #f5f5f5;
}
.tag.active {
  color: #fff;
  background: linear-gradient(90deg,#a6c0fe,#f2a8fd);
}
.recommend-list {
  margin: 12rpx 18rpx 0 18rpx;
}
.recommend-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: 14rpx;
  margin-bottom: 18rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx 0 rgba(80,80,120,0.06);
}
.rec-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12rpx 0 12rpx 18rpx;
}
.rec-img {
  width: 120rpx;
  height: 120rpx;
  object-fit: cover;
  border-radius: 10rpx;
  margin: 12rpx 12rpx 12rpx 0;
}
.rec-title {
  font-size: 26rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.rec-desc {
  font-size: 20rpx;
  color: #888;
  margin-bottom: 8rpx;
}
.rec-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rec-price {
  color: #ff6600;
  font-size: 22rpx;
  font-weight: bold;
}
.rec-position {
  color: #bbb;
  font-size: 20rpx;
}
.section-tags-vertical {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin: 10rpx 18rpx 0 18rpx;
}
.tag-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.news-tags {
  display: flex;
  gap: 16rpx;
  margin: 10rpx 18rpx 0 18rpx;
}
.news-list {
  margin: 12rpx 18rpx 0 18rpx;
}
.news-card {
  display: flex;
  background: #fff;
  border-radius: 14rpx;
  margin-bottom: 18rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx 0 rgba(80,80,120,0.06);
}
.news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12rpx 0 12rpx 18rpx;
}
.news-title {
  font-size: 24rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.news-desc {
  font-size: 20rpx;
  color: #888;
  margin-bottom: 8rpx;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.news-author {
  color: #888;
  font-size: 20rpx;
}
.news-time {
  color: #bbb;
  font-size: 20rpx;
}
.news-img {
  width: 100rpx;
  height: 80rpx;
  object-fit: cover;
  border-radius: 10rpx;
  margin: 12rpx 12rpx 12rpx 0;
}
.circle-tags {
  display: flex;
  gap: 16rpx;
  margin: 10rpx 18rpx 0 18rpx;
}
.circle-list {
  margin: 12rpx 18rpx 0 18rpx;
}
.circle-card {
  display: flex;
  background: #fff;
  border-radius: 14rpx;
  margin-bottom: 18rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx 0 rgba(80,80,120,0.06);
  padding: 12rpx 0;
}
.circle-avatar {
  width: 64rpx;
  height: 64rpx;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 18rpx;
}
.circle-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.circle-nick {
  font-size: 22rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.circle-badge {
  font-size: 18rpx;
  color: #ff8a65;
  margin-left: 8rpx;
}
.circle-text {
  font-size: 20rpx;
  color: #888;
  margin-bottom: 8rpx;
}
.circle-meta {
  display: flex;
  align-items: center;
  gap: 12rpx;
  color: #bbb;
  font-size: 18rpx;
}
.circle-num {
  margin: 0 4rpx;
}
.custom-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  height: 100rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 8rpx 0 rgba(80,80,120,0.06);
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 20rpx;
  position: relative;
}
.tabbar-item.active text {
  color: #000;
}
.center-btn {
  flex: none;
  width: 90rpx;
  height: 90rpx;
  margin-top: -30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.center-circle {
  width: 90rpx;
  height: 90rpx;
  background: #111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx 0 rgba(80,80,120,0.10);
}
.red-dot {
  position: absolute;
  top: -4rpx;
  right: -8rpx;
  width: 16rpx;
  height: 16rpx;
  background: #ff3b30;
  border-radius: 50%;
  border: 2rpx solid #fff;
}
.func-img {
  width: 70rpx;
  height: 70rpx;
  display: block;
}
.hot-img {
  width: 70rpx;
  height: 70rpx;
  display: block;
}
</style>
